<template>
  <div class="user-info">
    <div class="avatar-info flex items-center " @click="jumpHomePage">
      <div class="avatar border-1  w-25 h-25 p-2px mr-2">
        <img class="w-full h-full" :src="store.getUserInfoGetters.avatarUrl" alt="">
      </div>
      <div class="user_name flex flex-col">
        <div class="name flex items-center">
          <span class="w-30 truncate inline-block cursor-pointer yu-textColor-hover">
            {{ store.getUserInfoGetters.nickname }}
          </span>
          <span class="inline-block w-12 h-4">
            <img class="w-full h-full" :src="store.getVipInfoGetters.redVipDynamicIconUrl" alt="">
          </span>
        </div>
        <span class="border-2 mt-2 rounded-full w-10 text-center  text-xs italic">
          Lv.{{ store.getAllUserInfoGetters.level }}
        </span>
        <div class="signIn mt-4">
          <YuButton @click.stop="pcSign" :disabled="store.getAllUserInfoGetters?.pcSign">
            {{ store.getAllUserInfoGetters?.pcSign ? '已签到' : '签到' }}
          </YuButton>
        </div>
      </div>
    </div>
    <div class="attention grid grid-cols-3 text-center h-16  mt-2 mb-2 ">
      <div class="dynamic" :class="typeStyle">
          <span>
            {{ store.getAllUserInfoGetters?.profile?.eventCount }}
          </span>
        <span>
            动态
          </span>
      </div>
      <div class="focusOn h-full" :class="typeStyle" @click="jumpHomePage(0)">
        <span>{{ store.getAllUserInfoGetters?.profile?.follows }}</span>
        <span>关注</span>
      </div>
      <div class="fan h-full" :class="typeStyle" @click="jumpHomePage(1)">
            <span>
              {{ store.getAllUserInfoGetters?.profile?.followeds }}
            </span>
        <span>
              粉丝
            </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useStore} from "@/store/index"
import YuButton from '@/components/YuButton/index.vue'
import {ref} from "vue";
import {useRouter} from "vue-router"

const store = useStore()
const router = useRouter()
// 点击签到
const pcSign = () => {
  store.getDailySignin()
}
// pc右边个信息样式
const typeStyle = ref(['flex flex-col items-center justify-center cursor-pointer yu-textColor-hover'])
// 跳转到我的页面
const jumpHomePage = (type) => {
  router.push({
    path: '/user/homepage',
    query: {
      id: store.userInfo.userId,
      type
    }
  })
}
</script>

<style scoped>

</style>
